<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API连接测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .result { border: 1px solid #ddd; margin: 10px 0; padding: 15px; border-radius: 5px; }
        .success { background-color: #f6ffed; border-color: #b7eb8f; }
        .error { background-color: #fff2f0; border-color: #ffccc7; }
        button { padding: 10px 20px; margin: 5px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>前后端API连接测试</h1>
    
    <button onclick="testDirectAPI()">直接测试后端API</button>
    <button onclick="testFrontendAPI()">测试前端API调用</button>
    <button onclick="clearResults()">清除结果</button>
    
    <div id="results"></div>
    
    <script>
        function addResult(title, content, isSuccess = true) {
            const resultsDiv = document.getElementById('results');
            const resultDiv = document.createElement('div');
            resultDiv.className = `result ${isSuccess ? 'success' : 'error'}`;
            resultDiv.innerHTML = `
                <h3>${title}</h3>
                <pre>${JSON.stringify(content, null, 2)}</pre>
                <small>时间: ${new Date().toLocaleString()}</small>
            `;
            resultsDiv.appendChild(resultDiv);
        }
        
        function clearResults() {
            document.getElementById('results').innerHTML = '';
        }
        
        async function testDirectAPI() {
            try {
                const response = await fetch('http://localhost:3001/api/menu/public/items?t=' + Date.now(), {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                const data = await response.json();
                addResult('直接后端API测试', {
                    status: response.status,
                    success: data.success,
                    itemCount: data.data?.items?.length || 0,
                    items: data.data?.items?.map(item => ({
                        id: item.id,
                        name: item.name,
                        description: item.description
                    })) || []
                }, response.ok);
            } catch (error) {
                addResult('直接后端API测试', {
                    error: error.message,
                    stack: error.stack
                }, false);
            }
        }
        
        async function testFrontendAPI() {
            try {
                // 模拟前端API调用
                const token = localStorage.getItem('admin_token');
                const response = await fetch('/api/menu/public/items?t=' + Date.now(), {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': token ? `Bearer ${token}` : ''
                    }
                });
                
                const data = await response.json();
                addResult('前端API调用测试', {
                    status: response.status,
                    hasToken: !!token,
                    success: data.success,
                    itemCount: data.data?.items?.length || 0,
                    items: data.data?.items?.map(item => ({
                        id: item.id,
                        name: item.name,
                        description: item.description
                    })) || []
                }, response.ok);
            } catch (error) {
                addResult('前端API调用测试', {
                    error: error.message,
                    stack: error.stack
                }, false);
            }
        }
        
        // 页面加载时自动测试
        window.onload = function() {
            addResult('页面加载完成', {
                timestamp: new Date().toISOString(),
                userAgent: navigator.userAgent,
                location: window.location.href
            });
        };
    </script>
</body>
</html>